<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="no-referrer"/>
	<meta name="isLogin" th:content="${isLogin}">
	<link rel="stylesheet" type="text/css" href="/css/logo.css">
	<link rel="stylesheet" type="text/css" href="/css/cardCreator.css">
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" type="text/css" href="/css/jquery.page.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="http://demo.htmleaf.com/1901/201901251459/src/css/dialog.css">
	<link rel="stylesheet" type="text/css" href="/css/index_phone.css">

	<link rel="stylesheet" type="text/css" th:if="${config.css != null && config.css.trim() != ''}" th:href="${config.css}">
	<title>搜索</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="http://demo.htmleaf.com/1901/201901251459/src/jquery.dialog.js"></script>
<script src="/js/jquery.page.js"></script>
<script src="/js/Util.js"></script>
<script src="/js/suggestBox.js"></script>
<script src="/js/progress.js"></script>
<script src="/js/common.js"></script>
<script src="/js/CardCreator.js"></script>
<script src="/js/scriptLoader.js"></script>
<body class="phone">
	<div style="display: none;" id="hidden">
		<form  target="_blank" method="get" action="/play" id="form">
			<input name="tvid" type="hidden" />
			<input name="platform" type="hidden" />
			<input name="docid" type="hidden" />
			<input name="url" type="hidden" />
			<input name="data" type="hidden"/>
			<input name="submit" type="submit">
		</form>
		<a href="#" target="_blank"><span id="open"></span></a>
	</div>
	<div class="background"></div>
	<div>
		<div id="progressBox"></div>
		<div class="searchBox">
			<div class="searchContentBox">
				<select name="platform" class="platformSelect">
					<option th:each="search:${searchList}" th:value="${search.val}" th:text="${search.text}"></option>
				</select>
				<span class="searchBar">
					<input id="search" type="text" class="search" autocomplete="off"/>
				</span>
				<span class="searchBtnBox" style="width: auto;">
					<span id="searchBtn" class="searchBtn">
						<i class="fa fa-search"></i>
					</span>
				</span>
			</div>
		</div>
		<div class="suggestBox" id="suggestBox">
			<!--<div class="suggestItem" index="0" key="迪迦奥特曼">迪迦奥特曼</div>
            <div class="suggestItem" index="1" key="泰罗奥特曼">泰罗奥特曼</div>
            <div class="suggestItem" index="2" key="欧布奥特曼" >欧布奥特曼</div>
            <div class="suggestItem" index="3">泽塔奥特曼</div>
            <div class="suggestItem" index="4">盖亚奥特曼</div>-->
		</div>
	</div>
	<div class="contentBox">
		<div class="content">
			<div class="cardBoxContent hidden" id="positionCard">
			</div>
			<ul class="cardBoxContent" id="listCardContent">
			</ul>
		</div>
		<div id="page"></div>

		<div class="footer">
			<div id="verse">
				[( ${config.verse} )]
			</div>
			<div id="announce">
				<p>本站内容均从互联网收集而来，仅供交流学习使用，版权归原创者所有</p>
				<p >如有侵犯了您的权益，尽请通知我们，本站将及时删除侵权内容。</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(".contentBox").height(window.innerHeight - 30 - $(".searchBox").height() - 3);
	$(".content").css("min-height", $(".contentBox").height() - $(".footer").height() - 90 - 3);

	var tipsBox = {};
	var searcher = {};

	SuggestBox({
		rootDom: $("#suggestBox"),
		activeClass: "activeSuggestItem",
		onChange: function(old ,newDom){
			searcher.text($(newDom).text());
		},
		onSelected: function(selected){
			searcher.search($(selected).text());
		}
	}, tipsBox);

	// 初始化推荐框
	SuggestBox.suggest("", function(list){
		var suggestBox = document.getElementById("suggestBox");
		suggestBox.innerHTML = "";
		for(var i = 0, l = list.length; i < l; i ++){
			var item = list[i];
			var li = util.createTag("div", "suggestItem");
			li.setAttribute("key", item);
			li.innerHTML = item;
			suggestBox.appendChild(li);
		}
	})
	// 初始化搜索引擎
	let platform = util.getParameter().get("platform");
	platform = util.getDefault(platform, "iqiyi");
	$("select [value="+platform+"]").attr("selected", true);

	Search({
		dom: $("#search"),
		focus: () => tipsBox.show(),
		blur: () => tipsBox.hide(),
		input: (e) => SuggestBox.suggest($(e.target).val()),
		submit: (text) => {
			if (text === ''){
				location.reload();
			}
			tipsBox.hide();
			query(text)
		}
	}, searcher);
	$("#searchBtn").click(function(){
		if ($("#search").val() === '') {
			location.reload();
		}
		searcher.search();
	});


	var listContent = document.getElementById("listCardContent");
	var cardCreator = new CardCreator();
	var progess = new Progress();
	progess.render(document.getElementById("progressBox"));
	progess.setEvent(function(){
		listContent.innerHTML = cardCache.innerHTML;
	})
	var positionBox = document.getElementById("positionCard");
	positionBox.appendChild( cardCreator.createPositionCard(true) );
	var cardCache = document.createElement("div");
	var resultCache = [];

	var config = {errImg: '[[${config.errImg}]]'};
	function query(key, page){
		if (!page) {
			page = 1;
		}
		$("#page").css("visibility", "hidden");
		progess.start();
		$.get("/api/s", {key:key, platform: $("select[name=platform] option:selected").val(), page: page}, function (result){
			cardCache.innerHTML = "";
			console.log(result);
			if (result.code == 0){
				if (result.data.list.length == 0){
					cardCache.innerHTML = "<h2 class='msginfo'>暂未搜索到“"+key+"”相关信息</h2>";
					progess.end();
					return;
				}
				var data = util.getArrayDefault(result, "data", {});
				$("#page").Page({
					totalPages: data.pageAll,//分页总数
					liNums: 5,//分页的数字按钮数(建议取奇数)
					activeClass: 'activP', //active 类样式定义
					currentPage: data.currentPage,
					hasPrv: false,
					hasNext: false,
					callBack : function(page1, prePage){
						if (page1 !== prePage) {
							query($("#search").text(), page1);
						}
					}
				})
				data = util.getArrayDefault(data, "list", []);
				resultCache = util.clone(data);
				for(var i = 0, l = data.length; i < l; i ++){
					data[i].index = i;
					var b = cardCreator.createPhoneCard(data[i], positionBox, config);
					cardCache.appendChild(b);
				}
				$(cardCache).find(".episode_block_box").css("padding-left", (Math.floor(positionBox.clientWidth%46))/2 + "px");
			}
			else {
				cardCache.innerHTML = "<h3 class='msginfo'>接口错误："+result.msg+"</h3>";
			}
			progess.end();
		});
	}


	$(".cardBoxContent").delegate( "a", "click", function(e){
		e.preventDefault();
		if ( !$(e.currentTarget).parent().is(".episode_block_more") ){
			var index = $(e.currentTarget).parents(".card").attr("index");
			var docid = $(e.currentTarget).parents(".card").attr("docid");
			var tvid = $(e.currentTarget).attr("tvid");
			var platform = $(e.currentTarget).attr("platform");

			var url = $(e.currentTarget).attr("url");
			if (platform == "qq" || platform == "imgo"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				docid = paths[paths.length-2];
				url = null;
			}
			if (platform == "youku"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				tvid = tvid.substring(3);
				url = null;
			}
			if (platform == "bilibili"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				var index = tvid.indexOf("?");
				if (index != -1){
					tvid = tvid.substring(0, index);
				}
				docid = tvid;
				url = null;
			}
			var data = "";
			if ( tvid == "undefined" || tvid == "null" || tvid == ""){
				data = JSON.stringify(resultCache[index]);
			}
			$("#form").find("input[name=data]").val( data );
			$("#form").find("input[name=url]").val(util.getDefault(url, "", true));
			$("#form").find("input[name=platform]").val( util.getDefault(platform, "", true));
			$("#form").find("input[name=tvid]").val(  util.getDefault(tvid, "", true));
			$("#form").find("input[name=docid]").val(  util.getDefault(docid, "", true));
			$("#form").find("input[name=submit]").click();
		}
	});
	$(".cardBoxContent").delegate(".episode_block", "click", function(e){
		if ( $(e.currentTarget).is(".episode_block_more") ){
			var parent = $(e.currentTarget).parent();
			parent.find(".episode_block_hidden").css("display", "block");
			$(e.currentTarget).css("display", "none");
			parent.parent().find(".fold_episode_block_hidden").css("visibility", "visible");
		}
	})
	$(".cardBoxContent").delegate(".fold_episode_block_hidden", "click", function(e){
		var parent = $(e.currentTarget).parents(".card");
		parent.find(".episode_block_hidden").css("display", "none");
		parent.find(".episode_block_more").css("display", "block");			
		$(e.currentTarget).css("visibility", "hidden");
	})


	// 如果存在key
	searcher.search(util.getParameter().get("key"));
</script>
<script type="text/javascript" th:if="${config.js != null && config.js.trim() != ''}" th:src="${config.js}"></script>
</html>